<script setup>
  import { defineProps, computed } from "vue";
  const props = defineProps({
    mes: {
      type: String,
      default: "描述",
    },
    img: {
      type: String,
      default: "图片地址",
    },
  });
  // 使用 computed 函数来定义计算属性
  const resolvedImg = computed(() => {
    const imagePath = new URL(props.img, import.meta.url);
    return imagePath.href; // 返回图片的完整 URL
  });
</script>
<template>
  <div>
    <li>
      <div
        class="uk-position-cover"
        uk-slideshow-parallax="scale: 1.2,1.2,1"
      >
        <img
          v-img-lazy="resolvedImg"
          alt=""
          uk-cover
        />
      </div>
      <div
        class="uk-position-cover"
        uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"
      ></div>
      <div class="uk-position-bottom-left bg-gradient-4 uk-width-1-1 p-4">
        <div uk-slideshow-parallax="scale: 1,1,0.8">
          <h1
            uk-slideshow-parallax="x: 200,0,0"
            class="uk-heading-small"
          >
            {{ mes }}
          </h1>
        </div>
      </div>
    </li>
  </div>
</template>
